<!DOCTYPE html>
<html style="width:100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>客房列表</title>
    <link rel="stylesheet" href="../../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <style>
        header{
          padding: 1.6rem 0.8rem 0.5rem 0.8rem;
          position: fixed;
          width: 100%;
          background-color: #fff;
          z-index: 98;
          border-bottom: 1px solid #ccc
        }
        header span:nth-of-type(1){
          font-size: 1rem
        }
        header span:nth-of-type(2){
          font-size: 1rem
        }
        #room_list{
          padding-top: 4rem;
        }
        .list-item{
          display: flex;
          border-bottom: 1px solid #eee;
          padding: .5rem;
        }
        .list-item:last-child{
          border:0;
        }
        .left-img{
          flex: 2;
        }
        .left-img img{
          width: 9rem;
          height: 6rem;
        }
        .right-box{
          flex: 2;
          position: relative;
        }
        .right-box .p-items{
          padding: .5rem;
        }
        .right-box .name{
          font-size: .8rem;
          font-weight: bold;
        }
        .order{
          position: absolute;
          bottom: 1rem;
          right: 1rem;
          text-align: center;
          background: #FC7E05;
          border:1px solid #F9980A;
          color: #FFF;
          border-radius: 8px 8px 5px 5px;
          padding: 2px 3px;
        }
        .price{
          position: absolute;
          bottom: .6rem;
          right: 4rem;
          text-align: center;
          color:#F9980A;
        }
        .order .ding{
          font-size:1rem;font-weight:blod;
        }
        .order .pay{
          font-size:12px;
          background: #FFF;
          color:#F9980A;
          padding:0 5px;
        }
    </style>
</head>

<body style="background-color:rgb(255, 255, 255);color:rgb(57, 57, 57);margin:0;padding:0;width:100%;">
  <header>
    <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
    <span class="toptitle"></span>
  </header>
  <div id="room_list"></div>
</body>

</html>
<script type="text/javascript" src="../../script/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../lib/artTemplate/template.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/dns.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/html" id="roomlistTpl">
  {{each datas as value index}}
  <div class="list-item">
        <div class="left-img"><img src="{{value.head_img}}" alt="" /></div>
        <div class="right-box">
          <p class="p-items name">{{value.name}}</p>
          <p class="p-items">剩余：{{value.num}}间</p>
            {{if value.num == 0}}
              <p style="color:#ccc" class="price">&yen;<span style="font-size:1rem;color:#ccc;font-weight:blod;">{{value.price}}</span></p>
              <p onclick="NoRoom();" class="order" style="background:#ccc;border-color:#ccc;" data-id="{{value.id}}">
                <span class="ding">订</span>
                <br>
                <span class="pay" style="color:#ccc;">在线付</span>
              </p>
            {{else}}
              <p class="price">&yen;<span style="font-size:1rem;color:#F9980A;font-weight:blod;">{{value.price}}</span></p>
              <p class="order" data-id="{{value.id}}" onclick="PayOrder({{value.id}},'{{value.name}}');">
                <span class="ding">订</span>
                <br>
                <span class="pay">在线付</span>
              </p>
          {{/if}}
        </div>
  </div>
  {{/each}}
</script>
<script>
    apiready = function() {
      var room_id = api.pageParam.roomid;
      var room_title = api.pageParam.roomtitle;
      $('.toptitle').html(room_title);
      room_list(room_id);
    };

    //无房间
    function NoRoom () {
      api.toast({
          msg: '抱歉，该房间已被预订完！',
          duration: 2000,
          location: 'bottom'
      });
      return;
    }

    //客房列表
    function room_list (id) {
      $.ajax({
          url: dns + 'hotel/list',
          type: 'POST',
          dataType: 'json',
          data: {'id':id},
          beforeSend: function(request) {
              request.setRequestHeader("token", localStorage.getItem('token'));
          },
          success: function(msg) {
            //console.log(JSON.stringify(msg.list));
            if(msg.list.length > 0){
              var html = template("roomlistTpl", {'datas':msg.list});
              $('#room_list').html(html);
            }else{
              var html ="<p style='margin:50% auto;text-align:center;color:#666;font-size:1rem;'>暂无数据！</p>";
              $('#room_list').html(html);
            }

          },
          error: function(err) {
              api.toast({
                  msg: JSON.parse(err.responseText).msg,
                  duration: 2000,
                  location: 'bottom' //'bottom'
              });
              return;
          }
      });
    }

    //在线预订
    function PayOrder(id,title){
      api.openWin({
          name: 'payorder',
          url: 'payorder.html',
          allowEdit:true,
          pageParam: {
            'orderid':id,
            'ordertitle':title,
          },
      });
    }
</script>
